<template>
  <div class="app-container">
    <div class="formDesigner">
      <div class="managePage">
        <!-- 左侧咨询分类列表 -->
        <div class="leftTypes">
          <div class="logo-wrapper">
            <div class="logo" @click="changeType('')">咨询分类</div>
          </div>
          <el-input 
            placeholder="请输入内容" 
            prefix-icon="el-icon-search" 
            size="small" 
            style="width:90%;margin:10px 0" 
            v-model="inputValue" 
            @input="searchInputChange"
            clearable
          >
          </el-input>
          <div v-if="listRst.length&&listRst.length===0" class="formTypeEmpty"> 暂无咨询分类</div>
          <div class="formTypeItems">
            <div v-for="(item,index) in listRst" :key="index" :class="{formTypeItem:true,active:item.value===activeName}"
              @click="changeType(item.value)">
              <span :title="item.label" class="menuTitle"> <i class="el-icon-folder" style="marginRight:8px;"></i>{{item.label}}</span>
            </div>
          </div>
        </div>
        <!-- 右侧问答数据列表 -->
        <div class="rightContent">
          <!-- 顶部搜索和操作按钮 -->
          <div style="margin:0 0 20px 10px">
            <el-form :model="page" ref="queryForm" size="small" :inline="true" label-width="68px">
              <el-form-item label="问答标题">
                <el-input v-model="page.issueTitle" placeholder="请输入问答标题" clearable/>
              </el-form-item>
              <!-- <el-form-item label="状态">

                <el-input v-model="page.state" placeholder="请输入状态" clearable/>
              </el-form-item> -->
              <el-form-item label="状态" prop="status">
                <el-select v-model="page.status" placeholder="请选择状态" clearable>
                  <el-option 
                    v-for="item in stateList"
                    :key="item.value" 
                    :label="item.label" 
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button style="marginLeft: 10px" icon="el-icon-search" type="primary" size="small"  @click="searchChange">搜索</el-button>
                <el-button style="marginLeft: 10px" icon="el-icon-refresh"  size="small" @click="resetSearch">重置</el-button>
              </el-form-item>
              <div style="float: right">
                <el-button type="primary" icon="el-icon-plus" size="small" @click="operate({},'新建')">新建</el-button>
                <el-button size="small" icon="el-icon-delete" @click="multiDelPortal" :disabled="multipleSelection && multipleSelection.length === 0">批量删除</el-button>
                <el-button size="small" icon="el-icon-menu" @click="()=>{dialogTableVisible = true;tableTypeLoading=true;getTypeList()}">分类管理</el-button>
              </div>
            </el-form>
          </div>
          <el-table
            ref="multipleTable"
            :data="tableData"
            stripe
            style="width: 100%; marginBottom: 20px"
            size="small"
            @selection-change="handleSelectionChange"
            @row-click ="rowClick"  
            v-loading="tableLoading"
            class="tableInfo"
            :row-key="getRowKeys"
            highlight-current-row
            @sort-change="changeTableSort"
          >
            <el-table-column
              type="selection"
              width="80"
              align="center"
              :reserve-selection="true"
            ></el-table-column>
            <el-table-column
              label="问答编号"
              width="80"
              align="center"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <span>{{scope.$index + (page.pageNo - 1) * page.pageSize + 1}}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="issueTitle"
              label="问答标题"
              align="center"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              prop="categoryId"
              label="问答分类"
              align="center"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <span>{{formTypes.filter((_) => _.value ==scope.row.categoryId)[0] && formTypes.filter((_) => _.value ==scope.row.categoryId)[0].label}}</span>
              </template>
            </el-table-column>
            <el-table-column 
              prop="status" 
              label="状态" 
              align="center" 
              column-key="status" 
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <span>{{stateList.filter((_) => _.value ==scope.row.status)[0] && stateList.filter((_) => _.value ==scope.row.status)[0].label}}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="createTime"
              label="创建时间"
              sortable
              align="center"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button size="small" v-if="scope.row.status ==='0'"  type="text" @click="operate(scope.row,'发布')">发布</el-button>
                <el-button size="small" type="text" @click="operate(scope.row,'编辑')">编辑</el-button>
                <el-button size="small" type="text" style="color: red" @click="delList(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            background
            :layout="layout"
            :total="pageTotal"
            :page-size="page.pageSize"
            :page-sizes="pageSizes"
            :current-page="page.pageNo"
            style="float: right"
            @size-change="sizeChange"
            @current-change="currentChange"
          ></el-pagination>
        </div>
      </div>
      <!-- 新增/编辑弹框 -->
      <el-dialog
        :title="action === 'add' ? '新建问答' : '编辑问答'"
        :visible.sync="showDialog"
        @close='cancelFields'
        width="40%"
        class="custom-class"
      >
        <div class="el-dialog-div">
          <el-form :model="form" ref="basicForm">
            <el-form-item
              label="问答标题:"
              prop="issueTitle"
              :rules="[
                {
                  required: true,
                  message: '请输入问答标题，50字以内',
                  trigger: 'blur',
                },
              ]"
            >
              <el-input
                v-model="form.issueTitle"
                placeholder="请输入问答标题，50字以内"
                maxlength="50"
              >
              </el-input>
            </el-form-item>
            <el-form-item 
              label="问答分类：" 
              prop="categoryId" 
              :rules="[{required:true,message:'请选择问答分类',trigger:'change'}]">
              <el-select v-model="form.categoryId" placeholder="请选择问答分类" style="width:100%;" clearable>
                <el-option v-for="(item,index) in formTypes" :label="item.label" :key="index" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <span slot="label" style="padding-left: 10px;">
                &nbsp;&nbsp;关联问题：
              </span>
              <div style="border-radius: 4px;border: 1px solid #00000026;">
                <div style="height: 40px;background: #4F59B919;padding-left: 10px;"></div>
                <div style="padding: 20px;">
                  <el-select v-model="form.connectQuestion" filterable placeholder="请选择关联问题" style="width:100%;" @change="handleConnect" clearable>
                    <el-option v-for="(item,index) in questionArray" :disabled="item.disabled" :label="item.label" :key="index" :value="item.value">
                    </el-option>
                  </el-select>
                  <el-button type="primary" plain size="small" style="margin-top: 10px;"  @click="addconnectQ" :disabled="form.consultIds&&form.consultIds.length>=5?true:false" >+ 添加 </el-button>
                  <span style="color: #0000003F;text-align: left;padding-left: 10px;"> 最多5条关联问题</span>
                  <div>
                    <ul class="con-list">            
                      <li class="list-li" v-for="(item,index) in form.consultIds" :key="index" >
                        <!-- <span :title="item" class="title-name">{{item}}</span> -->
                        <span :title="item" class="title-name">{{questionArray.filter((i)=>{return i.value == item})[0] && questionArray.filter((i)=>{return i.value == item})[0].label}}</span>
                        <i class="el-icon-close" @click="delconnectQ(item,index)"></i>
                      </li>       
                    </ul>     
                  </div>
                </div>
              </div>
            </el-form-item>
            <el-form-item
              label="相似问法：" 
              prop="similarQuestion" 
              :rules="[{ validator: checkValueNameIfExist, trigger: 'blur'}]"
            >
            <span slot="label" style="padding-left: 10px;">
               &nbsp;&nbsp;相似问法：
            </span>
              <div style="border-radius: 4px;border: 1px solid #00000026;">
                <div style="height: 40px;background: #4F59B919;padding-left: 10px;"></div>
                <div style="padding: 20px;">
                  <el-input v-model="form.similarQuestion" maxlength="50" placeholder="请输入相似问法，50字以内"></el-input>
                  <el-button type="primary" plain size="small" style="margin-top: 10px;" @click="addsimilarQ" :disabled="form.consultIds&&form.similarIssueTitle.length>=5 || this.addDisabled?true:false" >+ 添加 </el-button>
                  <span style="color: #0000003F;text-align: left;padding-left: 10px;"> 最多5条相似问法</span>
                  <div>
                    <ul class="con-list">            
                      <li class="list-li" v-for="(item,index) in form.similarIssueTitle" :key="index" >
                        <span :title="item" class="title-name">{{item}}</span>
                        <i class="el-icon-close" @click="delsimilarQ(index)"></i>
                      </li>       
                    </ul>     
                  </div>
                </div>
              </div>
            </el-form-item>
            <el-form-item
              label="答案:"
              prop="answer"
              :rules="[
                {
                  required: true,
                  message: '请输入问答标题，50字以内',
                  trigger: 'blur',
                },
              ]"
            >
              <el-input
                type="textarea"
                placeholder="请输入内容"
                v-model="form.answer"
                maxlength="500"
                show-word-limit
                :autosize="{minRows: 10, maxRows: 15}"
              >
              </el-input>
            </el-form-item>
          </el-form>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancelFields">取 消</el-button>
          <el-button type="primary" @click="submit()" :disabled="updateFlag">保 存</el-button >
        </div>
      </el-dialog>
      <!-- 问答分类管理弹窗 -->
      <el-dialog title="问答分类管理" class="upload-dialog" :visible.sync="dialogTableVisible">
        <div style="float:right;margin:10px 0;">
          <el-button type="primary" icon="el-icon-plus" size="small" @click="editType('','add')">新增</el-button>
          <!-- <el-tooltip class="item" effect="dark" content="显隐" placement="top">
            <el-button icon="el-icon-s-operation" circle @click="showHide(true)"></el-button>
          </el-tooltip> -->
        </div>
        <el-table :data="formTypeData" stripe style="width: 100%;marginBottom:20px;" size="small"
          v-loading="tableTypeLoading" highlight-current-row>
          <el-table-column label="序号" width="80" align="center">
            <template slot-scope="scope">
              <span>{{scope.$index+(typePage.pageNo-1)*typePage.pageSize+1}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="categoryName" label="问答分类名称" align="center" show-overflow-tooltip>
          </el-table-column>
          <!-- <el-table-column prop="categoryCode" label="问答分类编码" align="center" show-overflow-tooltip>
          </el-table-column> -->
          <!-- <el-table-column prop="categorySpell" label="简拼" align="center" show-overflow-tooltip>
          </el-table-column> -->
          <el-table-column prop="categoryOrder" label="排序" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="categoryRemarks" label="备注" align="center" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button size="small" type="text" @click="editType(scope.row,'编辑')">
                <el-link type="primary">编辑</el-link>
              </el-button>
              <el-button size="small" type="text" @click="delType(scope.row)">
                <el-link type="danger">删除</el-link>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination background :layout="layout" :total="typePageTotal" :page-size="typePage.pageSize"
          :current-page="typePage.pageNo" :page-sizes="pageSizes" style="float:right;marginBottom:20px;"
          @size-change="typeSizeChange" @current-change="typeCurrentChange">
        </el-pagination>
        <span slot="footer" class="dialog-footer">
        </span>
      </el-dialog>
      <!-- 新增/编辑问答分类弹窗 -->
      <el-dialog :title="formTypeNew.id?'编辑问答分类':'新增问答分类'" :visible.sync="dialogTypeVisible" width="500px">
        <el-form :model="formTypeNew" ref="typeNewForm" label-width="120px" class="demo-ruleForm">
          <el-form-item label="问答分类名称" prop="categoryName"
            :rules="[{required:true,message:'请输入分类名称',trigger:'blur'},{validator:typeNameValidator,trigger:'blur'}]">
            <el-input v-model="formTypeNew.categoryName" placeholder="请输入分类名称"></el-input>
          </el-form-item>
          <!-- <el-form-item label="问答分类编码" prop="categoryCode"
            :rules="[{required:true,message:'请输入分类编码',trigger:'blur'},{validator:typeCodeValidator,trigger:'blur'}]">
            <el-input v-model="formTypeNew.categoryCode" placeholder="请输入分类编码"></el-input>
          </el-form-item> -->
          <el-form-item label="排序" prop="categoryOrder"
            :rules="[{required:true,message:'请输入排序',trigger:'blur'},{validator:sortValidator,trigger:'blur'}]">
            <el-input-number v-model="formTypeNew.categoryOrder" controls-position="right" :min="0" style="width:100%;">
            </el-input-number>
          </el-form-item>
          <el-form-item label="备注" prop="categoryRemarks">
            <el-input type="textarea" v-model="formTypeNew.categoryRemarks" :rows="5" maxlength="200" show-word-limit
              placeholder="请输入备注">
            </el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="()=>{this.dialogTypeVisible = false;this.$refs.typeNewForm.resetFields()}">取 消</el-button>
          <el-button type="primary" @click="saveType">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import Pinyin from '@/utils/ChinesePY'
import {create,getPage,getPageAll,getBack,update,release,getDelete,batchDel,getPageCategory,getLeftCategory,updateCategory,getBackCategory,delCategory,createCategory} from "@/api/infra/consult";
import { Alert } from 'element-ui';
export default {
  components: {
  },
  data() {
    return {
      addDisabled:false,
      questionArray:[],//所有问答标题的数据
      // connect:[],//关联问题数组
      // similar:[],//相似问题数组
      dialogTableVisible: false, //显示问答分类管理
      dialogTypeVisible: false, //显示新增问答分类
      inputValue: "", //输入框的值
      listRst:{},//筛选之后的列表数据
      sortord: '',//排序传参
      updateFlag:false,//弹框是否关闭状态
      question:'',//新建中的问答标题
      answer:'',//新建中的答案
      highlight:false,//是否高亮
      rowId:'',//行id
      action: "add", //判断是新建还是编辑
      form: {//新增/编辑弹框界面数据
        answer:'',
        issueTitle: '',
        id:'',
        categoryId:'',
        similarIssueTitle:[],
        consultIds:[],
        similarQuestion:'',//相似问法input框绑定
        connectQuestion:'',//关联问题input框绑定
      },

      showDialog: false, //显示新建/编辑界面
      tableLoading: false, //表格加载
      tableTypeLoading: false, //问答分类表格加载
      searchText: "", //关键字搜索
      layout: "prev, pager, next,sizes,jumper", //分页显示布局
      pageSizes: [10, 20, 30, 50], //分页显示每页条数选择
      pageTotal: 3, //数据总条数
      typePageTotal: 1, //问答分类总条数
      page: {
        pageNo: 1, // 当前页数
        pageSize: 10, // 每页显示多少条
        issueTitle:'',
        status:''
      },
      typePage: {
        pageNo: 1, // 当前页数
        pageSize: 10 // 每页显示多少条
      }, //问答分类分页配置
      formTypes: [], //问答分类
      multipleSelection: [], //多选
      options:[], //数据源管理界面中获取数据库id，ip
      stateList: [
        { label: '草稿', value: 0 },{ label: '发布', value: 1 }
      ],
      //咨询管理列表数据
      tableData:[],
      formTypeData: [], //问答分类数据
      activeName: '', //当前选择问答分类
      //问答分类新增/编辑数据
      formTypeNew: {
        id: '',
        categoryName: '',
        // categoryCode: '',
        // categorySpell: '',
        categoryOrder: 0,
        categoryRemarks: ''
      },
      categoryName: '', //当前编辑问答分类名称
      // categoryCode: '', //当前编辑问答分类编码
    };
  },
  mounted() {
    // 阻止默认行为
    document.body.ondrop = function (event) {
      event.preventDefault();
      event.stopPropagation();
    };
    this.getList(); //获取列表数据
    this.getTypes() //获取所有问答分类
    this.tableLoading = true
  },
  watch: {},
  methods: {
     // 校验值名称是否存在
    async checkValueNameIfExist(rule, value, callback) {
      if(value) {
        if (this.form.similarIssueTitle.indexOf(value) !== -1) {
          this.addDisabled = true
          callback(new Error('相似问法不能重复，请重新输入'))
        } else {
          this.addDisabled = false
            // callback()
        }
        // callback()
      }
      callback()
    },

    //关联问题下拉change事件
    handleConnect(test){
     
    },
    //添加关联问题
    addconnectQ(){
      if(this.form.connectQuestion){
        // this.connect.push(this.form.connectQuestion)
        // this.form.consultIds = this.connect
        this.form.consultIds.push(this.form.connectQuestion)
        this.questionArray.forEach(item => {
          if (item.value === this.form.connectQuestion) {
            item.disabled = true
          }
        });
      this.form.connectQuestion = ''
      }else{
        this.$message.warning('请选择关联问题')
      }
    },
    //删除关联问题
    delconnectQ(item,index){
      this.form.consultIds.splice(index, 1) 
      this.questionArray.forEach(element => {
        if (element.value === item) {
          element.disabled = false
        }
      });
    },
    //添加相似问法
    addsimilarQ(){
      if(this.form.similarQuestion){
        // this.similar.push(this.form.similarQuestion)
        // this.form.similarIssueTitle = this.similar
        this.form.similarIssueTitle.push(this.form.similarQuestion)
        this.form.similarQuestion = ''
      }else{
        this.$message.warning('请输入相似问法')
      }
    },
    //删除相似问法
    delsimilarQ(index){
      this.form.similarIssueTitle.splice(index, 1) 
      
    },

    //获取所有问答类别
    getTypes() {
      let params = {
        categoryName:this.inputValue
      }
      getLeftCategory(params).then((res) => {
        if (res.code === 0) {
          this.formTypes = res.data.map((item) => {
            return {
              value: item.id,
              label: item.categoryName
            }
          })
          this.listRst = this.formTypes
        }
      }).catch(e => {
        console.log('获取所有问答分类：', e)
      })
    },
    //获取问答分类数据
    getTypeList() {
      getPageCategory(this.typePage).then((res) => {
        if (res.code === 0) {
          this.formTypeData = res.data.list
          this.typePageTotal = res.data.total
          this.tableTypeLoading = false
        }
      }).catch(e => {
        console.log('分页获取问答分类：', e)
        this.tableTypeLoading = false
      })
    },
    //点击左侧类别，改变问答类型
    changeType(value) {
      this.activeName = value
      this.searchText = ''
      this.page.pageNo = 1
      this.getList() //重新获取问答数据
    },
    // 每次search框变化则进行筛选,对数据进行逻辑处理
    searchInputChange(value) {
      // 若未输入值，则展示所有数据
      if(null === value || undefined === value){
        this.listRst = this.formTypes;
      } else {
        this.listRst = []; // 结果列表置空
        let regStr =  '';
        // 初始化正则表达式
        for(let i=0; i<value.length; i++){
          regStr = regStr + '(' + value[i] + ')([\\s]*)'; //跨字匹配
        }
        let reg = new RegExp(regStr);
        for(let i=0; i<this.formTypes.length; i++){
          let label = this.formTypes[i].label; //按照名字匹配
          let regMatch = label.match(reg);
          if(null !== regMatch) {// 将匹配的数据放入结果列表中
            this.listRst.push(this.formTypes[i]);
          }
        }
      }
    },
    //新增/编辑问答分类--保存
    saveType() {
      this.$refs.typeNewForm.validate((valid) => {
        if (valid) {
          // this.formTypeNew.categorySpell = Pinyin.GetJP(this.formTypeNew.categoryName).toLowerCase() //简拼
          if (this.formTypeNew.id) { //编辑
            updateCategory(this.formTypeNew).then((res) => {
              if (res.code === 0) {
                this.$message.success('修改成功')
                this.$refs.typeNewForm.resetFields()
                this.dialogTypeVisible = false
                this.tableTypeLoading = true
                this.getTypeList()
                this.getTypes() //更新左侧菜单
              }
            }).catch(e => console.log('编辑问答分类：', e))
          } else { //新增
            createCategory(this.formTypeNew).then((res) => {
              if (res.code === 0) {
                this.$message.success('保存成功')
                this.$refs.typeNewForm.resetFields()
                this.dialogTypeVisible = false
                this.tableTypeLoading = true
                this.typePage.pageNo = 1
                this.getTypeList()
                this.getTypes() //更新左侧菜单
              }
            }).catch(e => console.log('新增问答信息：', e))
          }
        } else {
          return false
        }
      })
    },
    //打开问答分类新增/编辑窗口
    editType(row,type) {
      if(type === '编辑'){
        getBackCategory({id:row.id}).then((res) => {
          if(res.code === 0) {
            this.formTypeNew = {
              id: res.data.id,
              categoryName: res.data.categoryName,
              // categoryCode: res.data.categoryCode,
              // categorySpell: res.data.categorySpell,
              categoryOrder: res.data.categoryOrder,
              categoryRemarks: res.data.categoryRemarks,
            }
            this.categoryName = res.data.categoryName
            // this.categoryCode = res.data.categoryCode
          }
        }).catch(e => console.log('编辑回显问答信息：', e))
      }else{
        Object.keys(this.formTypeNew).forEach(key =>{this.formTypeNew[key] = ''})
      }
      this.dialogTypeVisible = true
      
    },
    //删除问答分类
    delType(row) {
      this.$confirm('是否确认删除', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let params = {
          ...this.page,
          formName: this.searchText,
          categoryId: row.id,

        }
        getPage(params).then((res) => {
          if (res.code === 0) {
            if (res.data.total > 0) { //分类下有问答
              this.$confirm('该分类下存在问答，是否确认删除', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                delCategory(row.id).then(res => {
                  if (res.code === 0) {
                    this.$message.success('删除成功')
                    // 返回到原记录所在页面，而当原记录所在页不存在时，则返回上一页
                    if (this.typePage.pageNo > 1 && (this.typePageTotal - 1) <= (this
                        .typePage
                        .pageNo -
                        1) * this.typePage.pageSize) {
                      this.typePage.pageNo--
                    }
                    this.tableTypeLoading = true
                    this.getTypeList()
                    this.getTypes() //更新左侧菜单
                  }
                }).catch(e => console.log('删除问答分类：', e))
              })
            } else {
              delCategory(row.id).then(res => {
                if (res.code === 0) {
                  this.$message.success('删除成功')
                  // 返回到原记录所在页面，而当原记录所在页不存在时，则返回上一页
                  if (this.typePage.pageNo > 1 && (this.typePageTotal - 1) <= (this.typePage
                      .pageNo - 1) *
                    this.typePage.pageSize) {
                    this.typePage.pageNo--
                  }
                  this.tableTypeLoading = true
                  this.getTypeList()
                  this.getTypes() //更新左侧菜单
                }
              }).catch(e => console.log('删除问答分类：', e))
            }
          }
        }).catch(e => {
          console.log('分页获取问答信息:', e)
        })
      })
    },
    //排序校验
    sortValidator(rule, value, callback) {
      if (value > 10000) {
        callback(new Error('不能超过10000'))
      } else {
        callback()
      }
    },
    //问答分类名称校验
    typeNameValidator(rule, value, callback) {
      if (value === this.categoryName) { //未修改
        callback()
      } else {
        if (value.length > 200) {
          callback(new Error('名称长度不能超过200'))
        } else if (/^[\s\S]*.*[^\s][\s\S]*$/.test(value)) {
          let params = {
            categoryName:''
          }
          getLeftCategory(params).then((res) => {
            if (res.code === 0) {
              let names = res.data.map((item) => {
                return item.categoryName
              })
              if (names.includes(value)) {
                callback(new Error('问答分类名称已存在，请修改'))
              } else {
                callback()
              }
            }
          }).catch(e => {
            console.log('获取所有问答分类：', e)
          })
        } else {
          callback(new Error('名称不能为空，且不能仅包含空格'))
        }
      }
    },
    //问答分类编码校验
    typeCodeValidator(rule, value, callback) {
      if (value === this.categoryCode) { //未修改
        callback()
      } else {
        let params = {
          categoryName:''
        }
        getLeftCategory(params).then((res) => {
          if (res.code === 0) {
            let codes = res.data.map((item) => {
              return item.categoryCode
            })
            if (codes.includes(value)) {
              callback(new Error('问答分类编码已存在，请修改'))
            } else {
              callback()
            }
          }
        }).catch(e => {
          console.log('获取所有问答分类：', e)
        })
      }
    },
    //多选rowkey
    getRowKeys(row) {
      return row.id;
    },
    //获取列表数据
    getList() {
      this.tableLoading = false;
      let params = {
        ...this.page, //页配置
        sortord:this.sortord,
      };
      if (this.activeName) { //根据当前选择类别查询
        params.categoryId = this.activeName  //问答类别
      }
      getPage(params).then((res) => {
        if (res.code === 0) {
          res.data.list.forEach((item)=>{
            item.createTime = this.getDateTime(item.createTime)
          })
          this.tableData = res.data.list;
          this.pageTotal = res.data.total;
          this.tableLoading = false;
        }
      })
      .catch((e) => {
        this.tableLoading = false;
      });
    },
    //多选，数据选择改变
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //行点击事件
    rowClick(row,column,event){
      this.highlight = true
      this.rowId = row.id
    },
    //时间戳转日期时间
    getDateTime(time) {
      if (!time) return ''
      let date = new Date(time)
      let year = date.getFullYear()
      let month = date.getMonth() + 1
      let day = date.getDate()
      let hour = date.getHours()
      let minute = date.getMinutes()
      let second = date.getSeconds()
      return `${year}-${month<10?'0':''}${month}-${day<10?'0':''}${day} ${hour<10?'0':''}${hour}:${minute<10?'0':''}${minute}:${second<10?'0':''}${second}`
    },
    //编辑/查看回显
    getBackAll(id){
      Object.keys(this.form).forEach(key =>{this.form[key] = ''})
      getBack({id:id}).then((res) => {
        if (res.code === 0) {
          this.form.issueTitle= res.data.issueTitle;
          this.form.answer =res.data.answer;
          this.form.categoryId =res.data.categoryId;
          this.form.id = res.data.id;
          this.form.consultIds = res.data.consultIds;
          this.form.similarIssueTitle = res.data.similarIssueTitle
          // this.similar = this.form.similarIssueTitle
          // this.connect = this.form.consultIds
          this.form.similarQuestion = res.data.similarQuestion
          this.form.connectQuestion = res.data.connectQuestion
        }
      })
      .catch((e) => {
        this.tableLoading = false;
      });
    },
    operate(row,oper){
      console.log(row)
      //获取所有问答标题
      if( oper==='新建' || oper === '编辑'){
        this.questionArray = []
        let params = {
          issueTitle:'',
          id:row.id?row.id:null
        }
        getPageAll(params).then((res) => {
          if (res.code === 0) {
            res.data.map((item,index)=>{
              this.questionArray.push(
                {
                  value:item.id,
                  label:item.issueTitle,
                  disabled:false
                }
              )
            })
           
          }
        }).catch((e) => {console.log(e);});
      }
      if(oper==='新建'){
        this.action = 'add'
        Object.keys(this.form).forEach(key =>{this.form[key] = ''})
        // this.$refs.basicForm.resetFields()
        this.form.similarIssueTitle=[]
        this.form.consultIds=[]
        this.showDialog = true;
      }else if(oper === '编辑'){
        this.action = 'edit'
        this.getBackAll(row.id)
        this.showDialog = true;
      }else{
        this.action = 'publish'
        let params ={
          id:row.id,
          status:'1'
        }
        //数据库创建
        release(params).then((res) => {
          if (res.code === 0) {
            this.$message.success('发布成功')
            this.showDialog = false
            this.getList();
          }
        }).catch((e) => {console.log(e);});
      }
    },
    //删除
    delList(row) {
      this.$confirm("是否确认删除", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        getDelete(row.id).then((res) => {
          if (res.code === 0) {
            this.$message.success("删除成功");
            this.tableLoading = true
            this.page.pageNo = 1
            this.$refs.multipleTable.clearSelection()
            this.getList();
          }
        })
        .catch((e) => {
          this.tableLoading = false;
        });
      })
      .catch((e) => console.log(e));
    },
    //批量删除
    multiDelPortal() {
      this.$confirm("是否确认删除", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let ids = this.multipleSelection.map((item) => {
          return item.id;
        });
        batchDel(ids).then(res => {
          if (res.code === 0) {
            this.$message.success('删除成功')
            // this.multipleSelection = []
            this.tableLoading = true
            this.page.pageNo = 1
            this.$refs.multipleTable.clearSelection()
            this.getList();

          } else {
            this.$message.error('所选数据删除失败！')
          }
        }).catch(e => console.log('批量删除：', e))
      });
    },
    //搜索
    searchChange() {
      this.page.pageNo = 1;
      this.tableLoading = true;
      this.getList();
    },
    //搜索重置
    resetSearch() {
      this.page.issueTitle= "";
      this.page.status = ''
      this.resetForm("queryForm");
      this.searchChange();
    },
    //每页条数更改
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
      this.page.pageNo = 1;
      this.tableLoading = true;
      this.getList();
    },
    //页码更改
    currentChange(current) {
      this.page.pageNo = current;
      this.tableLoading = true;
      this.getList();
    },
    //每页条数改变-问答分类管理
    typeSizeChange(pageSize) {
      this.typePage.pageSize = pageSize
      this.typePage.pageNo = 1
      this.tableTypeLoading = true
      this.getTypeList()
    },
    //页码改变-问答分类管理
    typeCurrentChange(current) {
      this.typePage.pageNo = current
      this.tableTypeLoading = true
      this.getTypeList()
    },
    cancelFields () {
      this.showDialog = false
      // this.$refs["basicForm"].clearValidate()
      this.$refs.basicForm.resetFields()
    },
    //确定提交
    submit(){
      this.updateFlag = true
      this.$refs["basicForm"].validate((valid) => {
        if (!valid) {
          this.updateFlag = false
          return;
        }
        if(this.action === 'add'){
          let params = {
            answer: this.form.answer,
            issueTitle: this.form.issueTitle,
            categoryId:this.form.categoryId,
            consultIds:this.form.consultIds,
            similarIssueTitle:this.form.similarIssueTitle
          }
          //创建
          create(params).then((res) => {
            if (res.code === 0) {
              this.$message.success('新增成功')
              this.showDialog = false
              this.getList()
            }
          })
          .finally(() => {
            setTimeout(() => {
              this.updateFlag = false;
            }, 1000)
          });
        }else{
          let params = {
            answer: this.form.answer,
            issueTitle: this.form.issueTitle,
            categoryId:this.form.categoryId,
            consultIds:this.form.consultIds,
            similarIssueTitle:this.form.similarIssueTitle,
            id: this.form.id,
            status:'0'
          }
          //编辑接口
          update(params).then((res) => {
            if (res.code === 0) {
              this.$message.success('修改成功')
              this.showDialog = false
              this.getList();
            }
          })
          .finally(() => {
            setTimeout(() => {
              this.updateFlag = false;
            }, 1000)
          });
        }
      });
    },
    //状态筛选
    // filterChange(val){
    //   console.log(val,'valinkey');
    //   for (const key in val) {
    //       if(key == "type"){
    //           this.type = val[key];
    //       }else if(key == "status"){
    //           this.status = val[key];
    //       }
    //   }
    //   this.page.pageNo = 1;
    //   this.getList(); //获取数据的接口
    // },
    //排序
    changeTableSort({ column, prop, order }) {
      let sortSign = "";
      if (order == "descending") {
          sortSign = "DESC";
          this.sortord = sortSign
      } else {
          sortSign = "ASC";
          this.sortord = sortSign
      }
      this.page.pageNo = 1;
      this.getList(); //获取数据的接口
    },
  },
};
</script>
<style lang="scss" scoped>
  .sqlButton {
    position: absolute;
    right: 10px;
    bottom: 4px;
    cursor: pointer;
    text-decoration: underline;
    z-index: 2;
  }
  .designer {
    .base {
      margin-right: 20%;
      margin-left: 15%;
      margin-top: 5%;

      .el-form-item {
        margin-bottom: 40px;
      }
    }

    .el-input--mini {
      width: 80px;
    }

    .designHeader {
      display: flex;
      justify-content: space-around;
      align-items: center;

      .designStep {
        display: flex;
        justify-content: center;
        width: 100%;
        margin-left: 10%;

        .designStepItem {
          width: 33.3%;
          display: flex;
          align-items: center;
          justify-content: space-around;

          .designStepLine {
            display: inline-block;
            width: calc(100% - 110px);
            height: 2px;
          }

          .designStepIndex {
            font-size: 16px;
            color: white;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            text-align: center;
            line-height: 30px;
            margin-right: 5px;
            margin-left: 5px;
            font-weight: bold;
          }

          .designStepTitle {
            font-size: 14px;
            font-weight: bold;
            width: 70px;
          }
        }
      }
    }
  }

</style>
<style lang="scss">
  .el-dialog-div {
    // height: 60vh;
    overflow-x: hidden;
  }
  .el-descriptions-item__label:not(.is-bordered-label){
    width: 20%;
    text-align: right;
    align-items: center;
    margin: auto 2%;
  }
  .el-descriptions-item__content{
    width: 75%;
  }
  .el-dialog__header{
    border-bottom: 1px solid #eee;
  }
  .el-dialog__title {
    font-size: 18px;
    color: #303133;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .el-dialog__body{
    padding-top: 20px;
  }
  .designer {
    .el-table {
      box-sizing: border-box;

      &::before {
        height: 0px;
      }
    }

    .el-table--border::after,
    .el-table--group::after {
      width: 0px;
      height: 0px;
    }

    .tableInfo {
      .el-table__cell {
        // border-bottom: 0px;
        padding: 3px;
      }
    }
  }
</style>
<style lang="scss" scoped>
  .title-name {
    // width:calc(100% - 50px);
    width: 95%;
    padding-right:2% ;
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }
  .con-list {
    // border: 1px solid red;
    padding: 5px 0 0 10px;
      .list-li {
      display: flex;
      justify-content: space-between;
      cursor: pointer;
      align-items: center;
      height: 35px;
      // padding-left: 0px;
      border-bottom: 1px solid #e6e8eb;
    }
  }

  .demo-ruleForm {
    padding: 20px 0;
  }
  .dotClass {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: block;
  }
  .app-container {
    .formDesigner {
      width: 100%;
      height: 100%;

      .managePage {
        display: flex;
        width: 100%;
        justify-content: space-between;
        // max-height: calc(100vh - 124px);

        .leftTypes {
          width: 12%;
          // height:100%;
          max-height: 100%;
          box-shadow: 2px 0px 2px 0px rgba(0,0,0,0.07); 

          .formTypeItems {
            max-height: calc(100vh - 170px);
            overflow-y: auto;

            .formTypeItem {
              padding: 10px 0px;

              .menuTitle {
                display: inline-block;
                width: 85%;
                padding-left: 5%;
                // text-align: center;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }

            .formTypeItem:hover {
              background: rgba(64, 158, 255, 0.1);
              color: #409EFF;
              border-right: 2px solid #409EFF;
              cursor: pointer;
            }
          }

          .active {
            background: rgba(64, 158, 255, 0.1);
            color: #409EFF;
            // border-right: 2px solid #409EFF;
          }

          .formTypeTitle {
            padding: 10px 0px;
            // text-align: center;
            background: #409EFF;
            color: white;
          }

          .formTypeEmpty {
            text-align: center;
            margin-top: 30%;
          }

        }

        .rightContent {
          width: 87%;
          height: 100%;

          .keywordInput {
            width: 200px;
            margin-right: 8px;
          }

          .tableInfo {
            width: 100%;
            margin-bottom: 20px;
            // height:calc(100% - 110px);
            max-height: calc(100% - 110px);
          }
        }
      }

      .designHeader {
        display: flex;
        justify-content: space-around;
        align-items: center;

        .designStep {
          display: flex;
          justify-content: center;
          width: 100%;
          margin-left: 10%;

          .designStepItem {
            width: 33.3%;
            display: flex;
            align-items: center;
            justify-content: space-around;

            .designStepLine {
              display: inline-block;
              width: calc(100% - 110px);
              height: 2px;
            }

            .designStepIndex {
              font-size: 16px;
              color: white;
              width: 30px;
              height: 30px;
              border-radius: 50%;
              text-align: center;
              line-height: 30px;
              margin-right: 5px;
              margin-left: 5px;
              font-weight: bold;
            }

            .designStepTitle {
              font-size: 14px;
              font-weight: bold;
              width: 70px;
            }
          }
        }
      }

      .basicInfo {
        margin-right: 20%;
        margin-left: 20%;
        margin-top: 5%;
      }

      .formConfig {
        margin-right: 20%;
        margin-left: 20%;
        margin-top: 1%;

        .tooltipText {
          font-size: 8px;
          padding-left: 100px;
          margin-top: 5px;
          margin-bottom: 10px;
        }

        .tooltipText2 {
          font-size: 8px;
          color: red;
          margin-bottom: 10px;
        }
      }
    }
  }

</style>
<style lang="scss">
  @import '@/styles/home';
  .el-drawer__header {
    border-bottom: 1px solid #e6e8eb;
    padding:10px 10px 10px 20px;
  }

  .el-dialog__header {
    display: flex;
    align-items: center;
    // margin: auto 0;
    padding:15px 15px 10px 20px;
    border-bottom: 1px solid #e8eaec;
  }
  .el-dialog__headerbtn {
    top: auto;
  }
  .formDesigner {
    .managePage {
      .el-table__cell {
        // border-bottom: 0px;
        padding: 3px 0px;
      }
    }

    .el-table {
      box-sizing: border-box;

      &::before {
        height: 0px;
      }
    }

    .el-table--border::after,
    .el-table--group::after {
      width: 0px;
      height: 0px;
    }

    .formConfig {
      .el-form-item {
        margin-bottom: 20px;
      }

      .el-table__cell {
        // border-bottom: 0px;
        padding: 0px;
      }

      .el-table__body-wrapper {
        margin-top: 10px;
      }
    }
    .el-dialog__header{
      .el-dialog__headerbtn{
        font-size:20px;
      }
    }
    .el-dialog__body {
      padding-top: 0px;

      .el-table__cell {
        // border-bottom: 0px;
        padding: 3px 0px;
      }
    }

    // 当前行高亮颜色
    // .current-row > td {
    //   background: #b2c8df !important;
    //   // color: white;
    // }

    // 鼠标悬浮行颜色
    // tr:hover > td {
    //   background-color: #b2c8df !important;
    // }
  }

</style>
